<!DOCTYPE html>
<html lang="zh_CN">
	<head>
		<!-- 设置字符集 -->
		<meta charset="utf-8"/>
		<!-- 设置IE浏览器使用最新版本渲染方式渲染当前页面 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
		<!-- 设置页面实现响应式，支持移动设备 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<title>BootStrap实现简易安农主页</title>
		
		<!-- 引入css和js文件 -->
		<script src="bootstrap/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
		<script src="bootstrap/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!-- 顶层图标栏 -->
		<div class="container top">
			<!-- 存放图片logo -->
			<div class="col-sm-5">
				<img src="image/index/logo.jpg" >
			</div>
			
			<!-- 存放顶部右侧内容，里面再分两行 -->
			<div class="col-sm-5 col-sm-offset-2 " style="height:108px;">
				<!-- 第一行English -->
				<div class="col-sm-12 top-right1" style="height:50%;">
					<span class="pull-right">English</span>
				</div>
				<!-- 第二行搜索框等 -->
				<div class="col-sm-12 top-right2" style="height:50%;">
					
					<div class="col-sm-2">
						<span>学生</span>
					</div>
					
					<div class="col-sm-3">
						<span>教职工</span>
					</div>
					
					<div class="col-sm-2">
						<span>校友</span>
					</div>
					
					<div class="col-sm-4" style="padding-left: 0px;">
						<input type="in" name="serach" id="search"/ style="height: 30px; outline: none;">
					</div>
					
					<div class="col-sm-1" style="padding-left:13px;">
						<img src="image/index/searchbut.jpg" >
					</div>
				</div>
			</div>
		</div>
		
		<!-- 上部导航栏 -->
		<div class="banner container-fluid text-center">
			<ul class="list-inline list-unstyled">
				<li><span>首页</span></li>
				<li><span>学校概况</span></li>
				<li><span>院系部门</span></li>
				<li><span>招生就业</span></li>
				<li><span>人才培养</span></li>
				<li><span>师资队伍</span></li>
				<li><span>科学研究</span></li>
				<li><span>校园服务</span></li>
			</ul>
		</div>
		
		<!-- 分割线 -->
		<div class="container-fluid" style="height: 3px;"></div>
		
		<!-- 中部轮播图 -->
		<div class="middle container-fluid" style="padding: 0px;" >
			<div id="myCarousel" class="carousel slide" >
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
					<li data-target="#myCarousel" data-slide-to="3"></li>
					<li data-target="#myCarousel" data-slide-to="4"></li>
				</ol>   
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner" >
					<div class="item active">
						<img src="image/index/3.jpg" alt="First slide">
					</div>
					<div class="item">
						<img src="image/index/2.jpg" alt="Second slide">
					</div>
					<div class="item">
						<img src="image/index/3.jpg" alt="Third slide">
					</div>
					<div class="item">
						<img src="image/index/4.jpg" alt="Forth slide">
					</div>
					<div class="item">
						<img src="./image/index/5.jpg" alt="Fifth slide">
					</div>
				</div>
			</div> 
		</div>
		
		<!-- 轮播图下方小图标 -->
		<div class="middle-ico container-fluid text-center">
			<ul class="list-inline list-unstyled">
				<li>
					<img src="image/index/b1.png"><br>
					<span>智慧安农</span>
				</li>
				<li>
					<img src="image/index/b2.png"><br>
					<span>电子资源</span>
				</li>
				<li>
					<img src="image/index/b3.png"><br>
					<span>移动门户</span>
				</li>
				<li>
					<img src="image/index/b4.jpg"><br>
					<span>书记校长信箱</span>
				</li>
				<li>
					<img src="image/index/b6.jpg"><br>
					<span>电子邮件</span>
				</li>
				<li>
					<img src="image/index/b5.png"><br>
					<span>信息公开</span>
				</li>
				<li>
					<img src="image/index/b7.png"><br>
					<span>人才招聘</span>
				</li>
				<li>
					<img src="image/index/b8.jpg"><br>
					<span>采购招标</span>
				</li>
			</ul>
			<!-- 分割线 -->
			<div class="container-fluid" style="height:8px;background-color:#f5f5f5;"></div>
		</div>
		
		<!-- 新闻栏目 -->
		<div class="news container-fluid" style="margin-top:40px">
			<!-- 新闻栏目第一层 -->
			<div class="news-1 row">
				<!-- 第一层左部 -->
				<div class="col-sm-5 col-sm-offset-2">
					<ul class="list-inline list-unstyled">
						<li><span>安农要闻</span></li>
						<li><span>媒体安农</span></li>
						<li><span>院部动态</span></li>
						<li><img src="image/index/yqfk.png"></li>
						<li class="pull-right" style="margin:15px auto;">
							<span style="font-size: 10px; color: #b9b9b9;" >进入新闻网</span>
						</li>
					</ul>
					<hr style="margin-top: 0px;">
				</div>
				<!-- 第一层右部 -->
				<div class="col-sm-3" style="margin-top: 15px;">
					<ul class="list-inline list-unstyled">
						<li><span>通知通告</span></li>
						<li><span>报告讲座</span></li>
						<li class="pull-right">
							<span style="font-size: 10px;color: #b9b9b9;" class="text-info">更多</span>
						</li>
					</ul>
					<hr style="margin-top: 0px;">
				</div>
			</div>
			<!-- 新闻栏目第二层 -->
			<div class="row">
				<!-- 第一列 -->
				<div class="col-sm-2 col-sm-offset-2">
					<img src="./image/index/paper.png" ><br><br>
					<span>《安徽日报》：推深做实新时代高校思想政治工作</span>
					<span class="pull-right" style="color: green;">2021-03-09</span>
				</div>
				<!-- 第二列 -->
				<div class="col-sm-3">
					<ul class="news-2 list-unstyled">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;人文社会科学学院与含山县铜闸镇举行党建共建签···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;经济管理学院召开党委中心组学习暨学史明理专题···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;园艺学院召开党史学习教育、新一轮深化“三个以···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;努力成为堪当民族复兴重任的时代新人···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;茶与食品科技学院举办“师生下午茶”之党史学习···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;学史明理、学史增信、学史崇德、学史力行--工···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;资源与环境学院深入推进学生创新创业能力培···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li><span>&nbsp;&nbsp;&nbsp;&nbsp;外国语学院开展“优秀毕业生职业生涯规划···</span><span class="date pull-right">04-26</span></li>
					</ul>
				</div>
				<!-- 第三列 -->
				<div class="col-sm-3">
					<ul class="news-3 list-unstyled">
						<li class="text-center"><span>4月27日资源与环境学院学术报告会···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li class="text-center"><span>4月29日学术报告:建立暴露组与靶···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li class="text-center"><span>4月28日学术报告:基于多种纳米材···</span><span class="date pull-right">04-26</span></li>
						<hr style="margin: 0rem;">
						<li class="text-center"><span>长江经济带磷资源高效利用与水···</span><span class="date pull-right">04-26</span></li>
					</ul>
				</div>
			</div>	
		</div>
		
		<!-- 底部信息 -->
		
		<!-- 背景层 -->
		<div class="end container-fluid">
			<!-- 图片层 -->
			<div class="container-fluid text-center">
				<!-- 第一层ul -->
				<ul class="foot-ul1 list-inline list-unstyled">
					<li><button type="button" class="btn">校友会</button></li>
					<li><button type="button" class="btn">信息公开</button></li>
					<li><button type="button" class="btn">本科生招生</button></li>
					<li><button type="button" class="btn">研究生招生</button></li>
					<li><button type="button" class="btn">就业信息网</button></li>
					<li><button type="button" class="btn">友情链接</button></li>
				</ul>
				<!-- 第二层ul -->
				<ul class="foot-ul2 list-inline list-unstyled">
					<li><img src="image/index/end1.jpg" ></li>
					<li><img src="image/index/end2.jpg" >/li>
					<li><img src="image/index/end3.png" ></li>
					<li><img src="image/index/end4.jpg" ></li>
					<li><img src="image/index/end5.jpg" ></li>
					<li><img src="image/index/end6.jpg" ></li>
				</ul>
				<!-- 第三层版权文字信息 -->
				<div class="container">
					<!-- 左侧文字 -->
					<div class="col-sm-5" style="color: white;">
						<span class="pull-left">
							版权所有&nbsp©&nbsp安徽农业大学&nbsp皖ICP备&nbsp05014183号<br/><br/>
							地址: 安徽省合肥长江西路130号&nbsp&nbsp邮编：230036
						</span>
						<img src="image/index/blue.jpg" class="pull-right">
						<span class="pull-left"></span>
					</div>
					<!-- 右侧图标 -->
					<div class="foot-ico col-sm-4 col-sm-offset-3 pull-right">
						<img src="image/index/zzb2er.jpg" >
						<img src="image/index/wbhover.jpg" >
						<img src="./image/index/wxhover.jpg" >
					</div>
				</div>
			</div>
		</div>
	</body>
</html>